<template>
	<view>
		<u-navbar :is-back="true" :is-fixed="true" title="新增订单"></u-navbar>
		<scroll-view scroll-y scroll-with-animation style="height: calc(100vh - 110px);" :show-scrollbar="false">

			<view class="tab-content">
				<view style=" background-color:#EFEDE9;">
					<view class="pl-2 pr-2 font-14 lineHight-40 font-weight-bold">服务信息</view>
				</view>
				<u-form :model="form">

					<u-form-item :label-style="labelStyle" label="上游服务商" prop="name">
						<u-input class="mr-3 " v-model="form.name" input-align="right" />
					</u-form-item>
					<u-form-item :label-style="labelStyle" label="产品/服务名称" prop="name">
						<u-input class="mr-3 " v-model="form.name" input-align="right" />
					</u-form-item>
					<u-form-item :label-style="labelStyle" label="服务价格" prop="name">
						<u-input class="mr-3 " v-model="form.name" input-align="right" />
					</u-form-item>
					<u-form-item :label-style="labelStyle" label="服务流程" prop="name">
						<u-input class="mr-3 " v-model="form.name" input-align="right" />
					</u-form-item>
					<u-form-item :label-style="labelStyle" label="售后服务" prop="name">
						<u-input class="mr-3 " v-model="form.name" input-align="right" />
					</u-form-item>

					<view style=" background-color:#EFEDE9;">
						<view class="pl-2 pr-2 font-14 lineHight-40 font-weight-bold">客户信息</view>
					</view>
					<u-form-item style="padding-right: 10px;" :label-style="labelStyle" label="涉农企业" prop="name">
						<u-input v-model="valueListCp" :type="type" input-align="right" :border="false"
							@click="showListCp = true" />
						<u-action-sheet :list="actionListCp" v-model="showListCp"
							@click="actionClickListCp"></u-action-sheet>
					</u-form-item>
					<u-form-item :label-style="labelStyle" label="联系方式" prop="name">
						<u-input class="mr-3" :disabled="true" v-model="form.name" input-align="right" />
					</u-form-item>
					<view style=" background-color:#EFEDE9;">
						<view class="pl-2 pr-2 font-14 lineHight-40 font-weight-bold">订单信息</view>
					</view>
					<u-form-item :label-style="labelStyle" label="订单编号" prop="name">
						<u-input class="mr-3" :disabled="true" v-model="form.name" input-align="right" />
					</u-form-item>
					<u-form-item :label-style="labelStyle" label="订单时间" prop="name">
						<uni-calendar ref="calendar" :insert="false" @confirm="confirm" />
						<view v-if="!selectedDate" class="text-999999 right-1-5 position-absolute" @click="open">
							请选择日期</view>
						<view v-else class="right-1-5 position-absolute" @click="open">{{ selectedDate }}</view>
					</u-form-item>
					<u-form-item :label-style="labelStyle" label="订单进度" prop="name">
						<u-input class="mr-3" :disabled="true" v-model="form.name" input-align="right" />
					</u-form-item>
					<u-form-item :label-style="labelStyle" label="订单评论" prop="name">
						<u-input class="mr-3" :disabled="true" v-model="form.name" input-align="right" />
					</u-form-item>
				</u-form>
			</view>

			<ferrButton title="确认新增订单"></ferrButton>
		</scroll-view>
	</view>
</template>

<script>
	import ferrButton from "@/components/free-ui/ferr-button.vue";
	import calendar from "@/uni_modules/uni-calendar/components/uni-calendar/uni-calendar.vue"
	export default {
		components: {
			ferrButton,
			calendar
		},
		data() {
			return {
				form: {
					name: '',
					intro: ''
				},
				value: '',

				type: 'select',
				selectedDate: null,

				valueListCp: '',
				actionListCp: [{
						text: '男'
					},
					{
						text: '女'
					},
					{
						text: '保密'
					}
				],
				showListCp: false,

				border: true,


				labelStyle: {
					paddingLeft: '13px',
					width: '130px'
				},


			};
		},
		methods: {

			actionClickListCp(index) {
				this.valueListCp = this.actionListCp[index].text;
			},


			open() {
				this.$refs.calendar.open();
			},
			confirm(e) {
				this.selectedDate = e.fulldate;
			},
		},
	};
</script>

<style>

</style>